<!DOCTYPE html>
<html>
<head>
	<title>文字无缝滚动</title>
	<meta charset="utf-8">
	<style type="text/css">
	*{margin: 0;padding: 0}
	body{
		font-size: 12px;
		line-height: 24px;
		text-align: center;
	}
	ul{
		list-style: none;
	}
	a img{
		border: none;
	}
	a {
		color: #333;
		text-decoration: none;
	}
	#mooc{
		width: 399px;
		border:5px solid #ababab;
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
		border-radius: 15px;
		box-shadow: 2px 2px 10px #ababab;
		margin: 50px auto 0;
		text-align: left;
	}
	#moocTitle{
		height: 62px;
		overflow: hidden;
		font-size: 26px;
		line-height: 62px;
		padding-left: 30px;
		background-image: -moz-linear-gradient(top,#f05e6f,#c9394a);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
	    border:1px solid #f05e6f;
	    color: #fff;
	    position: relative;
	}
	#moocTitle a{
		position: absolute;
		right: 10px;
		bottom: 10px;
		display: inline;
		color: #fff;
		font-size: 12px;
		line-height: 24px;
	}
	#moocBox{
		height: 144px;
		width: 335px;
		margin-left: 25px;
		margin:-top:10px;
		overflow: hidden;
	}
	#mooc ul li{
		height: 24px;
	}
	#mooc ul li a{
		width: 180px;
		float: left;
		display: block;
		overflow: hidden;
		text-indent: 15px;
		height: 24px;
	}
	#mooc ul li span{
		float: right;
		color: #999;
	}
	</style>
</head>
<body>
<div id="mooc">
	<h3 id="moocTitle">最新课程<a href="#" target="_self">更多》》</a></h3>
	<div id="moocBox">
		<ul id="con1">
			<li><a href="#">1.学会html5 绝对屌丝逆袭（案例）</a><span>2014-09-14</span></li>
			<li><a href="#">2.tab页面切换效果（案例）</a><span>2014-09-14</span></li>
			<li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2014-09-14</span></li>
			<li><a href="#">4.HTML+CSS基础课程（系列）</a><span>2014-09-14</span></li>
			<li><a href="#">5.分页页码制作（案例）</a><span>2014-09-14</span></li>
			<li><a href="#">6.导航条菜单的制作（案例）</a><span>2014-09-14</span></li>
			<li><a href="#">7.信息列表制作（案例）</a><span>2014-09-14</span></li>
			<li><a href="#">8.下拉菜单制作（案例）</a><span>2014-09-14</span></li>
			<li><a href="#">9.如何实现“新手引导”效果</a><span>2014-09-14</span></li>
		</ul>
		<ul id="con2"></ul>
	</div>
</div>

<script type="text/javascript">
	var area = document.getElementById('moocBox'),
	    con1 = document.getElementById('con1'),
	    con2 = document.getElementById('con2'),
	    speed = 50;
	area.scrollTop = 0;
	con2.innerHTML = con1.innerHTML;
    var myScroll = setInterval("scrollUp()",speed);
	function scrollUp(){
		if (area.scrollTop >= con1.scrollHeight) {
			area.scrollTop = 0;
		}else{
			area.scrollTop++;
		}
	}

	area.onmouseover = function(){
		clearInterval(myScroll);
	}
	area.onmouseout = function(){
		myScroll = setInterval("scrollUp()",speed);
	}
</script>
</body>
</html>